<template>
  <a-modal
    width="600px"
    v-model="visible"
    :title="$t('all.autotext1354')"
    @ok="submit"
    @cancel="close"
  >
    <a-form-model
      labelAlign="left"
      :rules="formRules"
      :model="form"
      ref="formRef"
      :label-col="{ span: 10 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-model-item :label="$t('all.autotext554')" prop="payUrl">
        <a-upload
          action="/api/common/upload"
          accept=".pdf, .jpg, .jpeg, .png"
          :file-list="fileList"
          @change="handleChange"
        >
          <a-button icon="upload">{{ $t('all.autotext1324') }}</a-button>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext1022')" prop="payNo">
        <a-input v-model="form.payNo" :placeholder="$t('all.autotext1371')" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext722')" prop="payTime">
        <a-date-picker
          v-model="form.payTime"
          format="YYYY-MM-DD HH:mm:ss"
          style="width:300px"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          :show-time="{ format:'HH:mm:ss' }"
        />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext983')" prop="remark">
        <a-input v-model="form.remark" :placeholder="$t('all.autotext1371')" />
      </a-form-model-item>
    </a-form-model>
    <identityCheck ref="identityRef" :content="$t('all.autotext566')" @ok="checkOk" />
  </a-modal>
</template>

<script>
import identityCheck from './identityCheck'
import { reversePayStatus } from '@/api/cost/audit'

export default {
  components: { identityCheck },
  props: ['costId'],
  data () {
    return {
      visible: false,
      form: {
        payNo: '',
        payTime: '',
        remark: ''
      },
      formRules: {
        payUrl: [{ required: true, validator: this.uploadFileChange, trigger: 'change' }],
        payNo: [{ required: true, message: this.$t('all.autotext1460'), trigger: 'change' }],
        payTime: [{ required: true, message: this.$t('all.autotext1352'), trigger: 'change' }]
      },
      fileList: [],
      identityCheckShow: false
    }
  },
  methods: {
    open () {
      this.visible = true
    },
    uploadFileChange (rule, value, callback) {
      if (this.fileList.length === 0) {
        return callback(new Error(this.$t('all.autotext1171')))
      } else {
        return true
      }
    },
    handleChange ({ file, fileList }) {
      if (file.status === 'done') {
        const { response } = file
        if (response && response.status === '1' && response.data) {
          if (fileList.length >= 1) {
            this.fileList = [
              fileList[fileList.length - 1]
            ]
          } else {
            this.fileList = []
          }
        } else {
          this.fileList = []
          this.$message.error(response && response.detail || this.$t('all.autotext740'))
        }
      } else {
        this.fileList = fileList
      }
    },
    submit () {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          this.$refs.identityRef.open()
        }
      })
    },
    async checkOk () {
      let payUrl = this.fileList.map(item => item.response.data).join(',')
      await reversePayStatus({
        ...this.form,
        id: this.costId,
        payUrl: payUrl
      })
      this.close()
      this.$emit('ok')
    },
    close () {
      this.fileList = []
      this.$refs.formRef.resetFields()
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-upload-select {
  width: 100% !important;
  .ant-btn {
    width: 100% !important;
  }
}
/deep/.ant-calendar-picker {
  width: 100% !important;
}
</style>
